<template>
    <div>
        <div style="height: 100%;">
            <div class="header">
                <span class="tableColumn name">{{ $t('confinedSpace.global.name') }}</span>
                <span class="tableColumn status">{{ $t('confinedSpace.overView.machine') }}</span>
                <span class="tableColumn time">{{ $t('confinedSpace.global.time') }}</span>
            </div>
            <div class="aside-main">
                <template v-if="dataSource.length>0">
                    <div class="list" v-for="item in dataSource" :key="item.id">
                        <span class="tableColumn name">{{item.name}}</span>
                        <span :class="[item.level === 1 ? 'danger' : item.level === 2 ? 'warn' : 'success','tableColumn','status']">{{ item.description || '-' }}</span>
                        <span class="tableColumn ">{{item.inDate}}</span>
                    </div>
                </template>                    
                <template v-else>
                    <div class="noData">
                        <img class="no-data-img" src="@/assets/pic_list_empty.png" alt="no_data" />
                        <div>{{$t('confinedSpace.global.noData')}}</div>
                    </div>
                </template>
            </div>
        </div>
        <!-- <el-table :data="dataSource" size="small">
            <el-table-column label="设备名称"></el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <span :class="scope.row.status === 1 ? 'success' : 'wait'">{{ scope.row.status === 1 ? '正常' : '异常' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="时间"></el-table-column>
        </el-table> -->
    </div>
</template>
<script>
import {postAction} from '@/api/manage'
export default {
    props:{
        dataSource:{
            type:Array,
            default:()=>[]
        }
    },
    data(){
        return {
        }
    },
    mounted(){
    },
    methods:{
    }
}
</script>
<style lang="scss" scoped>
.header{
    background: linear-gradient(90deg, #C4DCF5 0%, rgba(196, 220, 245, 0) 100%);
    border-radius: 5px;
    border-radius: 5px;
    padding: 0.26vw 0.78vw;
    font-size: 0.78vw;
}
.aside-main{
    height: calc(100% - 1.7vw);
    overflow-y: auto;
}
.list{
    padding: 0.26vw 0;
    font-size: 0.834vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tableColumn{
    width: 32%;
    display: inline-block;
    padding: 0 6px;
    &.name{
        width: 35%;
    }
    &.status{
        padding-left: 12px;
    }
    &.time{
        padding-left: 12px;
    }
}
.warn{
    position: relative;
    // color:#EB7B07FF;
    &::after{
        content: '';
        position: absolute;
        width: 0.32vw;
        height: 0.32vw;
        background: #EAD408;
        border-radius: 50%;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}
.danger{
    @extend .warn;
    // color:#38C914;
    &::after{
     background: #D41E1E;   
    }
}
.success{
    @extend .warn;
    // color:#38C914;
    &::after{
     background: #38C914;   
    }
}
.noData {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 90%;
    width: 90%;
    color: rgba(0,0,0,0.65);
    .no-data-img {
        width: 78px;
        margin: 16px 0 11px;
    }
}
</style>